<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>需要多层边框，该怎么做呢？利用box-shadow/outline</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box {
        background-color: thistle;
        width: 200px;
        height: 100px;
        margin: 100px auto;
        border:20px solid black;
        border-radius: 20px;
    }
    .boxShadowParent .box1 {
        box-shadow: 0 0 0 20px red,0 0 0 40px orange;
    }
    .boxShadowParent .box2 {
        box-shadow: 0 0 0 20px red inset,0 0 0 40px orange inset;
    }
    .boxShadowParent .box3 {
        box-shadow: 0 0 0 20px red,0 0 0 40px orange,20px 20px 12px 60px rgba(0, 0, 0, 0.6);
    }
    .outlineParent .box1 {
        outline: 20px solid orange;
    }
    .outlineParent .box2 {
        outline: 20px dashed orange;
    }
    .outlineParent .box3 {
        outline: 20px dashed orange;
        outline-offset: 20px;
    }
    .outlineParent .box4 {
        outline: 20px dashed orange;
        outline-offset: -46px;
    }
</style>

<body>
    <div class="boxShadowParent">
        <div class="box box1">
        </div>
        <div class="box box2">
        </div>
        <div class="box box3">
        </div>
    </div>
    <div class="outlineParent">
        <div class="box box1">
        </div>
        <div class="box box2">
        </div>
        <div class="box box3">
        </div>
        <div class="box box4">
        </div>
    </div>
</body>
<script type="text/javascript">
</script>

</html>